<template>
  <div id="header" class="header">
    <el-col class="left-content" :span="8">
      <i class="el-icon-s-unfold" @click="mainMenuToggle"/>
      <i class="el-icon-menu" @click="categoryMenuToggle"/>
      <i class="el-icon-search" @click="searchToggle"/>
    </el-col>
    <el-col class="center-content" :span="8">
      <!--suppress HtmlUnknownTarget -->
      <img @click="toIndex" style="width: 100px; height: 100%" alt="" :src='logoImage' draggable="false"/>
    </el-col>
    <el-col class="right-content" :span="8">
      <i class="el-icon-goods" @click="cardToggle"/>
      <i class="el-icon-star-off" @click="collectToggle"/>
      <i class="el-icon-user" @click="userToggle"/>
    </el-col>
  </div>
</template>

<script>
import logoImage from '@img/logo.png'
import { mapGetters } from 'vuex'

export default {
  name: 'PageHeader',
  data: () => {
    return {
      logoImage: logoImage
    }
  },
  methods: {
    mainMenuToggle () {
      this.$emit('mainMenuToggle')
    },
    categoryMenuToggle () {
      this.$emit('categoryMenuToggle')
    },
    searchToggle () {
      this.$emit('searchToggle')
    },
    cardToggle () {
      this.$emit('cardToggle')
    },
    collectToggle () {
      this.$emit('collectToggle')
    },
    userToggle () {
      if (this.isLogin) {
        this.$router.push('/account')
      } else {
        this.$emit('userToggle')
      }
    },
    toIndex () {
      this.$router.push('/index')
    }
  },
  computed: {
    ...mapGetters('user', ['isLogin'])
  }
}
</script>

<style lang="scss" scoped>

  .header{
    width: 100%;
    background-color: transparent;
    height: 66px;
    user-select: none;
    padding: 14px 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1999;

    i{
      display: inline-block;
      margin-left: 6px;
      margin-right: 6px;
      cursor: pointer;
      vertical-align: middle;
    }

    i:hover{
      color: darkgray;
    }

    .left-content{
      height: 100%;
      text-align: left;
      font-size: 26px;
      line-height: 32px;
    }

    .center-content{
      height: 100%;
      text-align: center;
      font-size: 32px;
      line-height: 32px;

      img{
        cursor: pointer;
      }

    }

    .right-content{
      height: 100%;
      text-align: right;
      font-size: 26px;
      line-height: 32px;
    }

  }
</style>
